<template>
  <div class="page-container">
    <el-form
      :model="formData"
      ref="dataForm"
      label-width="140px"
      label-position="right"
      :rules="rules"
    >
      <el-row>
        <el-col :span="11">
          <el-form-item label="网页标题" prop="webTitle">
            <el-input v-model="formData.webTitle"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <span class="tips">登录配置</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="背景图" prop="loginBgImageId">
            <ac-image v-model="formData.loginBgImageId" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="显示验证码" prop="loginCaptcha">
            <ac-dict-buttons v-model="formData.loginCaptcha" dictCode="dictYesNo" />
          </el-form-item>
        </el-col>
      </el-row>
      <!--
      <el-row>
        <el-col :span="8">
          <el-form-item label="登录页面" prop="loginPageId">
            <ac-tree
              v-model="formData.loginPageId"
              data-url="/system/page/queryTree"
              type-select="page"
            />
          </el-form-item>
        </el-col>
      </el-row>
      -->
      <el-row>
        <el-col :span="11">
          <el-form-item prop="ssoScriptId">
            <template #label>
              <el-tooltip>
                <template #content>
                  <p>1、如果解释单点登录过来的消息正确时，在脚本中直接返回解释出来的员工Id即可。</p>
                  <p>2、如果解释单点登录过来的消息失败时，在脚本中抛出一个错误异常即可。</p>
                </template>
                <div>
                  <span style="margin-right: 5px">登录脚本</span>
                  <ac-icon iconId="018dca8ec9890493be26" />
                </div>
              </el-tooltip>
            </template>
            <ac-tree
              v-model="formData.ssoScriptId"
              data-url="/system/scriptGroovy/queryTree"
              type-select="script"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="页面样式" prop="loginCss" style="height: 350px">
            <ac-code v-model="formData.loginCss" mode="css"></ac-code>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <span class="tips">注册配置</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="开启注册" prop="register">
            <ac-dict-buttons v-model="formData.register" dictCode="dictYesNo" />
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="formData.register === '1'">
          <el-form-item label="弹窗大小" prop="registerWidth">
            <ac-number v-model="formData.registerWidth" pointer="0" />
          </el-form-item>
        </el-col>
        <el-col :span="11" v-if="formData.register === '1'">
          <el-form-item label="弹窗标题" prop="registerTitle">
            <ac-input v-model="formData.registerTitle" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="formData.register === '1'">
        <el-col :span="11">
          <el-form-item label="弹窗页面" prop="registerPageId">
            <ac-tree
              v-model="formData.registerPageId"
              data-url="/system/page/queryTree"
              type-select="page"
            />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="注册脚本" prop="registerScriptId">
            <ac-tree
              v-model="formData.registerScriptId"
              data-url="/system/scriptGroovy/queryTree"
              type-select="script"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <span class="tips">密码配置</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="开启密码校验" prop="passwordCheck">
            <ac-dict-buttons v-model="formData.passwordCheck" dictCode="dictYesNo" />
          </el-form-item>
        </el-col>
        <el-col :span="11" v-if="formData.passwordCheck === '1'">
          <el-form-item label="密码过期天数" prop="passwordDay">
            <template #label>
              <el-tooltip>
                <template #content>
                  <div>填0时为永不过期</div>
                </template>
                <span>
                  <span style="margin-right: 5px">密码过期天数</span>
                  <ac-icon iconId="018dca8ec9890493be26" />
                </span>
              </el-tooltip>
            </template>
            <ac-number v-model="formData.passwordDay" :point="0"></ac-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="formData.passwordCheck === '1'">
        <el-col :span="11">
          <el-form-item label="必须包含小写字母" prop="passwordLowerLetter">
            <ac-dict-buttons v-model="formData.passwordLowerLetter" dictCode="dictYesNo" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="必须包含大写字母" prop="passwordUpperLetter">
            <ac-dict-buttons v-model="formData.passwordUpperLetter" dictCode="dictYesNo" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="formData.passwordCheck === '1'">
        <el-col :span="11">
          <el-form-item label="必须包含数字" prop="passwordDigit">
            <ac-dict-buttons v-model="formData.passwordDigit" dictCode="dictYesNo" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="必须包含特殊字符" prop="passwordSpecialChar">
            <ac-dict-buttons v-model="formData.passwordSpecialChar" dictCode="dictYesNo" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="formData.passwordCheck === '1'">
        <el-col :span="11">
          <el-form-item label="最小长度" prop="passwordMinLen">
            <ac-number v-model="formData.passwordMinLen" :point="0"></ac-number>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="最大长度" prop="passwordMaxLen">
            <ac-number v-model="formData.passwordMaxLen" :point="0"></ac-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="formData.passwordCheck === '1'">
        <el-col :span="11">
          <el-form-item label="强制修改初始密码" prop="passwordInitialEdit">
            <ac-dict-buttons v-model="formData.passwordInitialEdit" dictCode="dictYesNo" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <span class="tips">首页配置</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="LOGO图" prop="homeLogoImageId">
            <ac-image v-model="formData.homeLogoImageId"></ac-image>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="背景图" prop="homeBgImageId">
            <ac-image v-model="formData.homeBgImageId"></ac-image>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="页面样式" prop="chooseCss" style="height: 350px">
            <ac-code v-model="formData.chooseCss" mode="css"></ac-code>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <span class="tips">门户配置</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="门户首页" prop="portalPageId">
            <ac-tree
              v-model="formData.portalPageId"
              data-url="/system/page/queryTree"
              type-select="page"
            />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="网页标题" prop="portalTitle">
            <el-input v-model="formData.portalTitle"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="页面样式" prop="portalCss" style="height: 350px">
            <ac-code v-model="formData.portalCss" mode="css"></ac-code>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <span class="tips">样式配置</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="全局样式" prop="extendsCss" style="height: 350px">
            <ac-code v-model="formData.extendsCss" mode="css"></ac-code>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <div class="button-box">
    <el-button
      size="default"
      type="warning"
      @click="resetRSAForm"
      :loading="editLoading"
    >重置密钥</el-button>
    <el-button
      size="default"
      type="primary"
      @click="submitForm"
      :loading="editLoading"
    >保存</el-button>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import api from '@/http/api';

const rules = ref({
  webTitle: [
    {max: 100, message: '长度必须小于等于 100 个字符！', trigger: 'change'}
  ],
  pageTopContent: [
    {max: 50, message: '长度必须小于等于 50 个字符！', trigger: 'change'}
  ],
});

const editLoading = ref(false);
const dataForm = ref();
const formData = ref({
  "webTitle": '',
  "loginBgImageId": '',
  "loginCaptcha": '0',
  "homeLogoImageId": '',
  "homeBgImageId": '',
  "passwordCheck": '1',
  "passwordDay": 180,
  "passwordUpperLetter": '0',
  "passwordLowerLetter": '0',
  "passwordDigit": '0',
  "passwordSpecialChar": '0',
  "passwordMinLen": 6,
  "passwordMaxLen": 20,
  "passwordInitialEdit": '0',
  "extendsCss": ''
});

const loadSetting = async() => {
  const res = await api.post('/system/setting/querySetting');
  if (res && res.data && res.data.id) {
    formData.value = Object.assign({}, formData.value, res.data);
  }

  await nextTick(() => {
    dataForm.value && dataForm.value.clearValidate();
  });
};

const resetRSAForm = () => {
  ElMessageBox.confirm('请确认是否重置密钥？', '提示', {type: 'warning'}).then(() => {
    editLoading.value = true;
    api.post('/system/setting/resetRSAKey', formData.value).then(res => {
      ElMessage.success(res.message);
      editLoading.value = false;
    }).catch(() => {
      editLoading.value = false;
    })
  }).catch(() => {});
};

const submitForm = () => {
  dataForm.value && dataForm.value.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm('请确认是否提交？', '提示', {type: 'info'}).then(() => {
        editLoading.value = true;
        api.post('/system/setting/save', formData.value).then(res => {
          ElMessage.success(res.message);
          editLoading.value = false;
        }).catch(() => {
          editLoading.value = false;
        })
      }).catch(() => {});
    } else {
      ElMessage.error('数据录入不正确，请重新检查！');
    }
  })
};

onMounted(() => {
  loadSetting();
});
</script>

<style scoped>
.page-container :deep(.el-form) {
  margin-left: 20px;
}
.tips {
  display: block;
  margin-left: 20px;
  padding-top: 10px;
  padding-bottom: 5px;
  font-size: 16px;
  font-weight: 800;
}
.button-box {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
</style>